<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        h1{
            margin-left: 200px;
        }
        div{
            margin-left: 200px;

        }
        span{
            width: 150px;
            height: 80px;
            background-color: yellow;
            

        }
    </style>
<body>
    <!-- - 题目描述
   页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，具体表现如下图：
   1）要求双位显示，例如：九点九分九秒，显示为09:09:09
- 训练目标
  能够使用定时器。
- 训练提示
  1.开启定时器，每隔1秒执行1次回调函数
  2.回调函数中，使用Date对象获取当前时分秒
  3.判断时分秒是否大于10
  4.将时分秒内容拼接成字符串，并设置盒子的内容 -->
    <!-- <div></div>

    <script>
        var div = document.querySelector('div')
        setInterval(countDown, 1000)
        function countDown() {
            var time = new Date()
            var y = time.getFullYear();
            var m =  time.getMonth() + 1;
            var data = time.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var d = time.getDay();
            var h = time.getHours();
                h = h < 10 ? '0' + h : h;
            var f = time.getMinutes();
                f = f < 10 ? '0' + f : f;
            var s = time.getSeconds();
                s = s < 10 ? '0' + s : s;

            div.innerHTML = y + '年' + m + '月' + data + '日' + arr[d] + h + '时' + f + '分' + s + '秒'
        }
    </script> -->


    <!-- ### 双十一倒计时（加强训练）
- 题目描述
  页面上有一个倒计时时钟，显示距离双十一还有多长时间，要求自动变化，具体表现如下图：
- 训练目标
  能够使用定时器完成倒计时。
- 训练提示
  1.获取要操作的元素（天时分秒盒子）
  2.获取结束日期的时间戳
  3.开启定时器
  4.获取当前日期的时间戳，并计算两个日期的差
  5.将毫秒的时间差分别计算为天时分秒
  6.设置盒子的内容 -->
        <h1>距离光棍节,还有</h1>
        <div>
            <span class="day">1</span>
            <span class="hour">2</span>
            <span class="minute">3</span>
            <span class="second">4</span>
        </div>
        
        <script>
            var day=document.querySelector('.day')
            var hour=document.querySelector('.hour')
            var minute=document.querySelector('.minute')
            var second=document.querySelector('.second')
            countDown()
            setInterval(countDown,1000)

            function countDown(){
                var  nowTime= +new Date()
                var inputTime= +new Date('2022-11-11 00:00:00')
                var time=(inputTime - nowTime)/1000;

                var d=parseInt(time /60 /60 /24)
                day.innerHTML=d;

                var h=parseInt(time/ 60 /60 % 24 )
                hour.innerHTML=h;
                
                var  m=parseInt(time/60%60)
                minute.innerHTML=m;

                var  s=parseInt(time%60)
                second.innerHTML=s;

            }

        </script>


</body>

</html>